import { CSSProperties, useEffect, useState } from 'react'
import styles from './index.module.less'
const Dice = (props: any) => {
  const { isStopped } = props
  const [point, setPoint] = useState(0)

  useEffect(() => {
    if (!isStopped) {
      let _point = Math.floor(Math.random() * 6) + 1
      console.log('point', _point)
      setPoint(_point)
    }
  }, [isStopped])

  return <div className={isStopped ? styles.diceBlock : `${styles.diceBlock} ${styles.animationActive}`}
  style={point ?
    { '--animation-name': styles[`dice-rotate-${point}`] } as CSSProperties
    : { '--animation-name': styles[`dice-rotate`] } as CSSProperties
  }>
    <div className={styles.diceOne}></div>
    <div className={styles.diceTwo}></div>
    <div className={styles.diceThree}></div>
    <div className={styles.diceFour}></div>
    <div className={styles.diceFive}></div>
    <div className={styles.diceSix}></div>
  </div>
}
export default Dice